const vm = new Vue({
    el: "#app",
    data: {
        // 搜索关键字属性
        searchKeyWords: undefined,
        // 搜索类型,默认按照编号搜索
        searchType: "1",
        // 表格默认用户数据
        userListData: [
            {
                id: "10010",
                username: "zyh1",
                sex: "1",
                birthday: "2002-10-21",
                telephone: "17362311286",
                job: "1",
                salary: 5000.00,
                address: "湖北武汉",
                remark: "zyhstc",
            },
            {
                id: "10011",
                username: "zyh2",
                sex: "0",
                birthday: "2002-10-21",
                telephone: "17362311286",
                job: "2",
                salary: 5000.00,
                address: "湖北襄阳",
                remark: "zyhstc",
            },
            {
                id: "10012",
                username: "zyh3",
                sex: "1",
                birthday: "2002-10-21",
                telephone: "17362311286",
                job: "3",
                salary: 5000.00,
                address: "湖北随州",
                remark: "zyhstc",
            },
            {
                id: "10013",
                username: "zyh4",
                sex: "0",
                birthday: "2002-10-21",
                telephone: "17362311286",
                job: "1",
                salary: 5000.00,
                address: "湖北新洲",
                remark: "zyhstc",
            },
            {
                id: "10014",
                username: "zyh5",
                sex: "1",
                birthday: "2002-10-21",
                telephone: "17362311286",
                job: "2",
                salary: 5000.00,
                address: "湖北李集",
                remark: "zyhstc",
            },
            {
                id: "10015",
                username: "zyh6",
                sex: "1",
                birthday: "2002-10-21",
                telephone: "17362311286",
                job: "3",
                salary: 5000.00,
                address: "湖北荆州",
                remark: "zyhstc",
            },
            {
                id: "10016",
                username: "zyh7",
                sex: "1",
                birthday: "2002-10-21",
                telephone: "17362311286",
                job: "1",
                salary: 2000.00,
                address: "湖北监利",
                remark: "zyhstc",
            },
            {
                id: "10017",
                username: "zyh8",
                sex: "0",
                birthday: "2002-10-21",
                telephone: "17362311286",
                job: "2",
                salary: 4000.00,
                address: "湖北咸宁",
                remark: "zyhstc",
            },
        ],
        // 添加用户弹框是否展示属性
        addUserFlag: false,
        // 添加用户的对象
        addUserObj: {
            id: undefined,
            username: undefined,
            sex: undefined,
            birthday: undefined,
            telephone: undefined,
            job: undefined,
            salary: undefined,
            address: undefined,
            remark: undefined,
        },
        // 校验添加表单规则
        ruleReg: {
            username: [
                {required: true, message: "姓名不能为空", trigger: blur()},
                {min: 2, max: 20, message: "姓名长度需在2-20字符之间", trigger: blur()},
            ],
            telephone: [
                {required: true, message: "电话不能为空", trigger: blur()},
                {min: 11, max: 11, message: "电话长度需为11位", trigger: blur()},
            ],
            address: [
                {required: true, message: "地址不能为空", trigger: blur()},
                {min: 2, max: 60, message: "地址长度需在2-60字符之间", trigger: blur()},
            ],

        },
        // 编辑用户弹框是否展示属性
        editUserFlag: false,
        // 编辑页面用户的对象
        editUserObj: {
            id: undefined,
            username: undefined,
            sex: undefined,
            birthday: undefined,
            telephone: undefined,
            job: undefined,
            salary: undefined,
            address: undefined,
            remark: undefined,
        },
        // 批量删除的 id 数组
        ids: [],
    },
    methods: {
        // 性别格式化
        sexFormat: function (rowData) {
            return rowData.sex == "1" ? "男" : "女";
        },
        // 职位格式化
        jobFormat: function (rowData) {
            switch (rowData.job) {
                case "1":
                    return "攻城狮";
                case "2":
                    return "程序猿";
                case "3":
                    return "码农";
            }
        },
        // 展示添加用户弹框的方法
        showAddUserPage: function () {
            this.addUserFlag = true;
        },
        // 关闭表单页面时重置表单内容
        resetAddForm: function () {
            this.$refs["addForm"].resetFields();
        },
        // 提交添加页面表单
        submitAddForm: function () {
            this.$refs["addForm"].validate(flag => {
                if (flag) {
                    // 转换日期格式
                    let birthday = this.addUserObj.birthday;
                    let year = birthday.getFullYear();
                    let month = birthday.getMonth();
                    month++;
                    if (month < 10) {
                        month = "0" + month;
                    }
                    let day = birthday.getDate();
                    // 创建添加的对象，并将 addUserObj 的数据赋值，最后添加到 userListData
                    let addObj = {
                        id: String(Number(this.userListData[this.userListData.length - 1].id) + 1),
                        username: this.addUserObj.username,
                        sex: this.addUserObj.sex,
                        birthday: year + "-" + month + "-" + day,
                        telephone: this.addUserObj.telephone,
                        job: this.addUserObj.job,
                        salary: this.addUserObj.salary,
                        address: this.addUserObj.address,
                        remark: this.addUserObj.remark,
                    }
                    this.userListData.push(addObj);
                    this.$alert("表单提交成功", "温馨提示", {type: "success"});
                    this.addUserFlag = false;
                } else {
                    this.$message({
                        showClose: true,
                        title: "温馨提示",
                        message: "请检查表单是否填写合法",
                        type: "warning",
                    })
                }
            });
        },

        // 编辑按钮
        // 显示编辑表单页面并回显数据
        editUserForm: function (scope) {
            // 展示编辑页面并显示本来的值
            this.editUserFlag = true;
            // 回显编辑页面表单
            let row = scope.row;
            this.editUserObj.id = row.id;
            this.editUserObj.username = row.username;
            this.editUserObj.sex = row.sex;
            this.editUserObj.birthday = row.birthday;
            this.editUserObj.telephone = row.telephone;
            this.editUserObj.job = row.job;
            this.editUserObj.salary = row.salary;
            this.editUserObj.address = row.address;
            this.editUserObj.remark = row.remark;
        },
        // 重置编辑表单的数据
        resetEditForm: function () {
            this.$refs["editForm"].resetFields();
        },
        // 提交编辑表单信息
        submitEditForm: function () {
            this.$refs["editForm"].validate(flag => {
                if (flag) {
                    // 根据 editUserObj.id 来找到 userListData 中对应的 id 的行并重新赋值
                    for (let i = 0; i < this.userListData.length; i++) {
                        let userListItem = this.userListData[i];
                        let editItem = this.editUserObj;
                        if (userListItem.id == editItem.id) {
                            // 转换日期格式
                            let birthday = new Date(editItem.birthday);
                            let year = birthday.getFullYear();
                            let month = birthday.getMonth();
                            month++;
                            if (month < 10) {
                                month = "0" + month;
                            }
                            let day = birthday.getDate();
                            if (day < 10) {
                                day = "0" + day;
                            }
                            userListItem.username = editItem.username;
                            userListItem.sex = editItem.sex;
                            userListItem.birthday = year+"-"+month+"-"+day;
                            userListItem.telephone = editItem.telephone;
                            userListItem.job = editItem.job;
                            userListItem.salary = editItem.salary;
                            userListItem.address = editItem.address;
                            userListItem.remark = editItem.remark;
                        }
                    }
                    // 赋值后弹窗提示
                    this.$message({
                        showClose: true,
                        title: "温馨提示",
                        message: "用户信息修改成功",
                        type: "success",
                    });
                    // 关闭编辑弹框
                    this.editUserFlag = false;
                } else {
                    this.$message({
                        showClose: true,
                        title: "温馨提示",
                        message: "请检查表单是否填写合法",
                        type: "warning",
                    })
                }
            });
        },

        // 删除按钮
        // 点击删除按钮删除一行
        deleteOneRow: function (scope) {
            let row = scope.row;
            // 删除前询问是否删除
            this.$confirm(`您确定要删除id为${row.id}的行吗？`)
                .then(() => {
                    // 拿到 row 中的 id ，找到 userListData 中的相同 id 行并删除
                    // 使用过滤
                    this.userListData = this.userListData.filter(item => {
                        return item.id != row.id;
                    });
                    // 弹框提示
                    this.$message({
                        showClose: true,
                        title: "通知",
                        message: `id为${row.id}的行删除成功`,
                        type: "success",
                    });
                })
                .catch();
        },

        // 表格全选
        selectAll: function (rowsData) {
            // 将所有选中的 id 添加进 ids 数组中
            // 使用映射
            this.ids = rowsData.map(item => {
                return item.id;
            })
            console.log(this.ids);
        },
        // 表格选中一行
        selectOne: function (rowData) {
            // 将所有选中的 id 添加进 ids 数组中
            this.ids = rowData.map(item => {
                return item.id;
            })
        },

        // 批量删除
        // 根据 ids 里面的数据删除
        DeleteMultipleRow: function () {
            if (this.ids.length==0){
                this.$message({
                    showClose:true,
                    title:"温馨提示",
                    message:"请选择要删除的数据",
                    type:"warning",
                })
            }
            else {
                this.$confirm(`您确定要删除吗？`)
                    .then(() => {
                        this.userListData = this.userListData.filter(item => {
                            return this.ids.indexOf(item.id) == -1
                        })
                        // 弹框提示
                        this.$message({
                            showClose: true,
                            title: "通知",
                            message: `批量删除成功`,
                            type: "success",
                        });
                    })
                    .catch();
            }
        },

        // 搜索
        // 分类讨论
        searchBtn: function () {
            // 每次搜索完成后重新恢复数据
            this.userListData= [
                {
                    id: "10010",
                    username: "zyh1",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "1",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
                {
                    id: "10011",
                    username: "zyh2",
                    sex: "0",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "2",
                    salary: 5000.00,
                    address: "湖北襄阳",
                    remark: "zyhstc",
                },
                {
                    id: "10012",
                    username: "zyh3",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "3",
                    salary: 5000.00,
                    address: "湖北随州",
                    remark: "zyhstc",
                },
                {
                    id: "10013",
                    username: "zyh4",
                    sex: "0",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "1",
                    salary: 5000.00,
                    address: "湖北新洲",
                    remark: "zyhstc",
                },
                {
                    id: "10014",
                    username: "zyh5",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "2",
                    salary: 5000.00,
                    address: "湖北李集",
                    remark: "zyhstc",
                },
                {
                    id: "10015",
                    username: "zyh6",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "3",
                    salary: 5000.00,
                    address: "湖北荆州",
                    remark: "zyhstc",
                },
                {
                    id: "10016",
                    username: "zyh7",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "1",
                    salary: 2000.00,
                    address: "湖北监利",
                    remark: "zyhstc",
                },
                {
                    id: "10017",
                    username: "zyh8",
                    sex: "0",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "2",
                    salary: 4000.00,
                    address: "湖北咸宁",
                    remark: "zyhstc",
                },
            ];
            switch (this.searchType) {
                // 根据编号进行搜索
                case "1":
                    this.userListData = this.userListData.filter(item => {
                        return item.id.indexOf(this.searchKeyWords) != -1;
                    })
                    this.$message({
                        showClose:true,
                        title:"状态",
                        message:"查询成功",
                        type:"success",
                    })
                    break;
                // 根据姓名进行搜索
                case "2":
                    this.userListData = this.userListData.filter(item => {
                        return item.username.indexOf(this.searchKeyWords) != -1;
                    })
                    this.$message({
                        showClose:true,
                        title:"状态",
                        message:"查询成功",
                        type:"success",
                    })
                    break;
                // 根据地址进行搜索
                case "3":
                    this.userListData = this.userListData.filter(item => {
                        return item.address.indexOf(this.searchKeyWords) != -1;
                    })
                    this.$message({
                        showClose:true,
                        title:"状态",
                        message:"查询成功",
                        type:"success",
                    })
                    break;
            }
        }
    },
});